export default {
    functional:true, // 函数式组件 他没有自己的状态，所以性能更好。 正常组件是一个类组件
    // 每次使用这个组件都要new   函数式组件可以直接拿到返回的虚拟节点来渲染
    render(h,{parent,data}){ // createElement
        const route = parent.$route; // 拿到的就是我们刚才定义的那个响应式数据
        // 级联组件
        let depth = 0;
        data.routerView = true; // 先默认肯定是渲染根组件
        while (parent) { // 根据当前组件向上查找
            // $vnode表示这个组件的虚拟节点  _vnode表示组件渲染vnode
            if(parent.$vnode && parent.$vnode.data.routerView){
                depth++;
            }
            parent = parent.$parent; // 不停的找爸爸，找到最顶层
        }
        let record = route.matched[depth]; // [about about/a]
        if(!record){
            return h()
        }
        return h(record.component,data); // routerView:true
        // 组件渲染是先父后子 App.vue (router-view) About(router-view)
    }
}
// 组件在渲染的时候 是一层层的渲染 A-》 B -> C

// 用vue 也就两层足以


// router-view RouterView = true
// router-view  RouterView = true depth = 1
// router-view RouterView = true depth =2
// router-view depth = 3